import { FC } from 'react';
import { Card,Col,Row ,Table,List } from 'antd';

const Selection: FC = () => {
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ];
  
  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sydney No. 1 Lake Park',
    },
  ];

  return (
    <div className="pl-4">
      <Row gutter={16} style={{marginBottom: '20px'}}>
        <Col span={6}>
          <Card title="大盘涨跌" bordered={false}>
            Card content
          </Card>
        </Col>
        <Col span={6}>
          <Card title="涨停家数" bordered={false}>
            Card content
          </Card>
        </Col>
        <Col span={6}>
          <Card title="赚钱效应" bordered={false}>
            Card content
          </Card>
        </Col>
        <Col span={6}>
          <Card title="情绪温度" bordered={false}>
            Card content
          </Card>
        </Col>
      </Row>
      <Row style={{marginBottom: '20px'}}>
        <Col span={24}>
          <Table columns={columns} dataSource={data} pagination={false}/>
        </Col>
      </Row>
      <Row style={{marginBottom: '20px'}}>
      <Col span={24}>
        <List
          header={<div>Header</div>}
          footer={<div>Footer</div>}
          bordered
          dataSource={data}
          renderItem={item => (
            <List.Item>
              {item.name}
            </List.Item>
          )}
        />
        </Col>
      </Row>
    </div>
  );
};

export default Selection;
